<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" background-color="#7cabb1" 
        text-color="#baccd9" active-text-color="#fff" unique-opened router> 
            <template v-for="item in state.items">
                <el-sub-menu v-if="item.subs" :index="item.index" :key="item.index">
                    <template #title>
                        <el-icon>
                            <Menu/>
                        </el-icon>
                        {{ item.title }}
                    </template>
                    <template v-for="subItem in item.subs">
                        <el-menu-item :index="subItem.index">
                            <el-icon>
                                <edit/>
                            </el-icon>
                            {{ subItem.title }}
                        </el-menu-item>
                    </template>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
    </template>
    
    <script setup>
        const state = {
            items: [
                {
                    index: "1",
                    title: "基础信息管理",
                    subs:[
                        { index: "user", title: "用户信息"},
                        { index: "admin", title: "管理员信息"},
                        { index: "petmanagement", title: "宠物信息"},
                    ],
                },
                {
                    index: "2",
                    title: "公共信息管理",
                    subs:[
                        { index: "bellmanagement", title: "公告信息"},
                        { index: "messagemanagement", title: "留言板信息"},
                        { index: "petadopt", title: "宠物领养申请"},
                        { index: "activitymanagemet", title: "活动信息"},
                        { index: "losemanagement", title: "丢失信息"}
                    ],
                },
                {
                    index: "3",
                    title: "社区信息管理",
                    subs:[
                        { index: "communitypost", title: "社区帖子"}
                    ],
                }
            ],
        }
    </script>
    
    <style scoped>
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;
        background: pink;
    }
    
    .sidebar::-webkit-scrollbar {
        width: 0;
    }
    
    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 250px;
    }
    
    .sidebar>ul {
        height: 100%;
        text-align: left;
    }
    </style>